<template>
  <!-- 搜索组件 -->
  <div class="search">
    <div class="head">
      <img src="../assets/img/logo.png" alt="">
      <div class="meau" v-if="isShow">
        <ul>
          <li><router-link to="/index">首页</router-link></li>
          <li><router-link to="/building">建材商品</router-link></li>
          <li><router-link to="/furniture">家居商品</router-link></li>
          <li><router-link to="/brand">品牌活动</router-link></li>
          <li>
            <a href="http://www.zhuolukeji.com/salesPrograms.html" target="_blank">整包方案</a>
          </li>
          <li @click="modelShow=true">户型</li>
        </ul>
      </div>
      <div class="find">
        <!-- <Input placeholder="请输入" :class="{'input':true , 'active-bor':hqfocus}" @focus="handleinput()"></Input> -->
        <input type="text" placeholder="请输入" @focus="hqfocus = true" maxlength="50" @blur="hqfocus = false" :class="{'active-bor':hqfocus}">
        <Icon :class="{'search-ios-search':true,'active-color':hqfocus}" type="ios-search"></Icon>
      </div>
    </div>
    <model :visible.sync="modelShow" content="浏览VR户型需要下载客户端"></model>
  </div>
</template>

<script>
import { Icon, Input } from "iview";
import Model from "../components/modal.vue";
export default {
    components: {
        Icon,
        Input,
        Model
    },
    props: {
        isShow: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            hqfocus: false,
            modelShow: false
        };
    },
    methods: {
        handleinput() {
            this.hqfocus = true;
        }
    }
};
</script>

<style lang="less">
@import "../assets/public/public.less";
@import "../assets/public/theme.less";

.search {
    .head {
        .width-1260-center;
        position: relative;
        overflow: hidden;
        margin-top: 30px;
        img {
            width: 72px;
            height: 72px;
        }
        .meau {
            position: relative;
            font-size: 16px;
            color: #364049;
            cursor: pointer;
            ul {
                overflow: hidden;
                position: absolute;
                left: 145px;
                top: -68px;
                li {
                    float: left;
                    padding-left: 36px;
                }
            }
        }
        li:hover {
            color: #49cbcd;
        }
        .find {
            position: absolute;
            left: 860px;
            top: 20px;
            width: 400px;
            height: 36px;
            input {
                width: 400px;
                height: 36px;
                line-height: 36px;
                font-size: 14px;
                border-radius: 100px;
                color: #364049;
                padding: 0 54px 0 20px;
                border: 1px solid #788492;
                outline: none;
            }
            :-moz-placeholder {
                /* Mozilla Firefox 4 to 18 */
                color: #8898ab;
            }
            ::-moz-placeholder {
                /* Mozilla Firefox 19+ */
                color: #8898ab;
            }
            input:-ms-input-placeholder {
                color: #8898ab;
            }
            input::-webkit-input-placeholder {
                color: #8898ab;
            }
            .search-ios-search {
                color: #788492;
                font-size: 21px;
                position: absolute;
                right: 17px;
                top: 7px;
            }
        }
        .find:hover {
            input {
               border: 1px solid #49cbcd; 
            }
            .search-ios-search {
                color: #49cbcd;
            }
        }
        .active-bor {
            border: 1px solid #49cbcd !important;
        }
        .active-color {
            color: #49cbcd !important;
        }
    }
}
</style>

